import { defineComponent } from 'vue';
import { getFRC } from '@/api/home';
import SheltV2 from '../../common/SheltV2';
import './index.less';
import ItemTable from '../Welfare/ItemTable';
import '../../../style/index.less';
import Detail from '../../mobile/Detail';
import { isMobile } from '@/utils';

export default defineComponent({
  name: 'Trophy',
  setup() {
    const itemTableRef = ref();
    const data = ref({ list: [] }) as AnyObject;
    const filterDetail = reactive({
        search:{type:2}
    })
    const tableDetail = [
        { title: '荣誉', key: 'name' },
        { title: '荣誉值', key: 'content' },
      ];
      const detailRef = ref();
    getFRC({ type: 2, page: 1, pageSize: 5 }).then((res) => {
      data.value = res.data;
    });

    return () => (
      <>
        <SheltV2
          title="我的荣誉"
          more="查看全部"
          onViewDetail={() => (isMobile()? (detailRef.value.show = true):(itemTableRef.value.dialogVisible = true))}
        >
          <ul class="trophy">
            {data.value.list.length > 0 ? (
              data.value.list
                ?.slice(0, 3)
                .map((_item: AnyObject) => (
                  <li class="text-truncate">{_item.name}</li>
                ))
            ) : (
              <p class="empty">暂无荣誉</p>
            )}
          </ul>
          <ItemTable data={data.value} type={2} ref={itemTableRef} />
        </SheltV2>
        <Detail
          title="我的荣誉"
          ref={detailRef}
          filterDetail={filterDetail}
          tableDetail={tableDetail}
          requestApi={getFRC}
        />
      </>
    );
  }
});
